<template>
  <div class="dashboard">
    <a-row class="panels" :gutter="16">
      <a-col class="gutter-row" :span="12" :lg="6">
        <Panel color="#E066FF" title="产品管理" :num="nums.pro">
          <proSvg />
        </Panel>
      </a-col>
      <a-col class="gutter-row" :span="12" :lg="6">
        <Panel color="#FF34B3" title="Banner管理" :num="nums.banner">
          <bannerSvg />
        </Panel>
      </a-col>
      <a-col class="gutter-row" :span="12" :lg="6">
        <Panel color="#FF6347" title="关于我们" :num="nums.about">
          <aboutSvg />
        </Panel>
      </a-col>
      <a-col class="gutter-row" :span="12" :lg="6">
        <Panel color="#FF69B4" title="用户" :num="nums.users">
          <usersSvg />
        </Panel>
      </a-col>
    </a-row>
    <a-row>
      <EchartsLine />
    </a-row>
    <a-row class="gutter-down">
      <a-col :span="12" class="a">
        <EchartsLineone />
      </a-col>
      <a-col :span="12" class="b"> <EchartsLinetwo /> </a-col>
    </a-row>
  </div>
</template>

<script setup>
//svg
import proSvg from "../../../assets/svg/pro.svg";
import bannerSvg from "../../../assets/svg/banner.svg";
import aboutSvg from "../../../assets/svg/about.svg";
import usersSvg from "../../../assets/svg/users.svg";

import Panel from "../../../components/panel.vue";
import * as countsApi from "../../../api/dashboard";
import EchartsLine from "./echartsLine.vue";
import EchartsLineone from "./echartsLineone.vue";
import EchartsLinetwo from "./echartsLinetwo.vue";
import { ref } from "vue";
const keys = Object.keys(countsApi).map((item) =>
  item.slice(3, item.length - 6).toLowerCase()
);
const nums = ref({});
const getCountApi = () => {
  const arr = Object.values(countsApi);
  return Promise.all(arr.map((item) => item()));
};
getCountApi().then((res) => {
  console.log(res);
  const obj = {};
  keys.forEach((item, index) => {
    obj[item] = res[index];
  });
  console.log(obj);
  nums.value = obj;
});
</script>

<style scoped lang="less">
.panels {
  padding: 20px;
}
.dashboard {
  background-color: #f5f5f5;
}
.gutter-down {
  margin-top: 20px;
}
</style>
